<template>
	<view class="wrapper">
		<image src="../../static/shouye/huiyuan1.png" mode="aspectFill" class="top"></image>
		<div class="back-icon posf" @click="back(1)" :style="`top:calc(20rpx + ${safeTop}px)`">
			<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
		</div>
		<div class="colum posr">
			<image src="../../static/shouye/huiyuan4.png" mode="aspectFill" class="text1 "></image>
			<div class="f24 text2 tCenter mt10">享受积分兑换电子券</div>
			<div class="f24 text2 center mb20">支持芒果TV、爱奇艺、优酷、网易云等多平台</div>
		</div>
		<div class="main-box posr">
			<div class="f32 fbold text3 mb40">限时兑换</div>
			<div class="content space-between fWrap">
				<div class="box4 center" v-for="(v,i) in doings" :key="v.id" @click="goDetail(v)">
					<div class="left-box flex1">
						<div class="tCenter f28 mb20">￥<span class="fbold f30">{{v.price}}</span></div>
						<!-- <div class="f26 center mt15 mb20 fbold">年卡</div> -->
						<div class="f20 center nowrap">{{v.useTo}}</div>
					</div>
					<div class="right-box colum">
						<div class="f22 center mb20 mt10 nowrap">{{v.name}}</div>
						<!-- <div class="ctheme f26 mt10 mb15"><span class="f30 fbold">{{v.price}}</span>积分</div> -->
						<div class="f24 center cfff btn-orange" @click.stop="open(v)">兑换</div>
					</div>
				</div>

			</div>
		</div>
		<div class="box5 space-around" v-for="(v,i) in list" :key="v.id" @click="goDetail(v)">
			<image :src="v.poster" mode="aspectFill" class="logo-icon"></image>
			<div class="colum mr40 flex1 ml20">
				<!-- <div class="f26 t-mouth"><span class="f22 ctheme">￥</span><span class="f30 ctheme">78</span>/3个月</div> -->
				<div class="f28 fbold mt30 tCenter t-text">{{v.name}}</div>
			</div>
			<div class="colum">
				<div class="f26 ctheme"><span class="f30 fbold">{{v.price}}</span>积分</div>
				<div class="f24 center cfff btn-orange1" @click.stop="open(v)">兑换</div>
			</div>
		</div>
		<!-- 兑换弹出层 -->
		<u-popup :safeAreaInsetBottom="false" :show="show" mode="bottom" bgColor="transparent">
			<duiHuan :detail='detail' @close='close' :showDetail='true' @goDetail='goDetail'></duiHuan>
		</u-popup>
	</view>
</template>

<script>
	import duiHuan from '/components/duiHuan'
	export default {
		data() {
			return {
				show: false,
				doings: [],
				list: [],
				pageNum: 1,
				pageSize: 10,
				detail: {},
				time: 60,
			}
		},
		components: {
			duiHuan
		},
		onLoad() {
			this.getaudiovisuallist()
		},
		onReachBottom() {
			this.pageNum++
			this.getaudiovisuallist()
		},
		methods: {

			// 查询正在上架的视听会员产品
			getaudiovisuallist() {
				this.$http('/api/audiovisual/list', {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then((r) => {
					this.doings = r.data.doings
					this.list = this.list.concat(r.data.list)
				})
			},
			// 跳转页面-视听会员商品详情列表
			goDetail(v) {
				uni.navigateTo({
					url: '../shiTingHuiYuan/xiangXi?id=' + v.id
				})
			},
			open(v) {
				if (!uni.getStorageSync('uInfo')) {
					uni.navigateTo({
						url: '/pages/dengLu/dengLu'
					})
					return
				}
				v = this.copy(v)
				v.poster = v.poster.split(',')
				this.detail = v
				this.show = true
			},
			close() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box5 {
		height: 174rpx;
		background: url(../../static/shouye/huiyuan5.png) -10rpx center;
		background-size: 105% 113%;
		margin: 0 20rpx 15rpx;
		padding: 0 20rpx 0 0;
		border-radius: 15rpx;
		overflow: hidden;

		.t-text {
			line-height: 46rpx;
		}

		.logo-icon {
			width: 190rpx;
			height: 190rpx;
		}

		.t-mouth {
			color: #643D1F;
		}

		.btn-orange1 {
			background: linear-gradient(to right, #FF5623, #FF8900);
			height: 60rpx;
			width: 180rpx;
			border-radius: 45rpx;
			margin-top: 15rpx;
		}
	}

	.top {
		width: 105%;
		height: 500rpx;
	}

	.back-icon {
		top: 50rpx;
		left: 38rpx;
		z-index: 5;
	}

	.text1 {
		margin-top: -470rpx;
		// margin: -350rpx auto 25rpx;
		width: 270rpx;
		height: 74rpx;
	}

	.text2 {
		color: #9696A0;
		line-height: 46rpx;
	}

	.main-box {
		margin: -125rpx 20rpx 20rpx;
		padding: 30rpx 20rpx;
		background: #FFF1D2;
		box-shadow: 5rpx 0rpx 11rpx 0rpx #EED8CF;
		border-radius: 13rpx 13rpx 13rpx 13rpx;

		.text3 {
			color: #643D1F;
		}

		.box4 {
			width: 330rpx;
			height: 140rpx;
			background: url(../../static/shouye/huiyuan3.png);
			background-size: 100% 100%;
			padding: 10rpx 20rpx 15rpx 30rpx;

			.left-box {
				.tCenter {
					color: #FF5555;
				}

				.center {
					color: #643D1F;
				}
			}

			.right-box {
				.btn-orange {
					background: linear-gradient(to right, #FF5623, #FF8900);
					height: 40rpx;
					line-height: 40rpx;
					width: 90rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
</style>